<template>
  <div class="body">
    <div class='bindCar' v-if='payInfo.length>0?true:false'>
      <div class='tis'>
        <p style='text-align: center;font-size:16px'>以下车辆查询到停车费</p>
      </div>
      <van-cell-group class='hascar'>
        <van-cell  class='carlist' v-for="(item,index) in payInfo" :title="item.plateNo"  is-link    @click='toPayDeatils(index)' />
      </van-cell-group>
    </div>
    <div class='searchCar'>
      <div class='searchBar' >
        <div style='margin: 20px 0'>
          <p style='text-align: center'>输入车牌号查询停车费</p>
        </div>
        <div style='display: flex;flex-direction: row;border: 1px solid #cccccc;border-radius: 5px'>
          <van-field   style='width: 74%;margin-left: 3px' disabled v-model='carNumber'  center clearable placeholder="请输入车牌号" @click.native='showKeyBoard()' class='bound-veh-field-input'>
          </van-field>
          <van-button  style='margin: 7px 0' slot="button" size="small" type="primary" @click='showCarType=true'>{{optionTips}}</van-button>
        </div>

      </div>
      <!--<div class='history'>-->
        <!--<p>历史查询：  <span>{{historyNo[0]}}</span>   <span>{{historyNo[1]}}</span>   <span>{{historyNo[3]}}</span></p>-->
      <!--</div>-->
      <div class='btn' @click='searchCarInfo'>
        <van-button  class='btn-c' size="large" style='height: 45px;line-height: 45px;background:#4797FD;color: white'>查询停车费</van-button>
      </div>
    </div>
     <!--牌照类型选择-->
    <van-popup v-model="showCarType" position="bottom" >
     <van-picker show-toolbar title="选择牌照类型" :columns="columns" @cancel="showCarType=false" @confirm="onConfirm"/>
    </van-popup>

      <!--车牌键盘-->
    <van-popup v-model="show" position="bottom" :overlay="false">
      <van-row style='padding: 1%;margin: 0px' v-show="showTyper==1" gutter="5">
        <van-col v-for="i in provinces" span='3'   style='margin-top: 0.2%;' @click.native='input(i)'>
          <div align="center" class="bound-veh-keyboardcell" :style="[{backgroundColor:(i=='关闭' ? '#30AFF7' : '')},{color:(i=='关闭' ? '#ffffff' : '')}]"
               :class="{ 'bound-veh-keyboardactive': i==active }" >
            {{i}}
          </div>
        </van-col>
      </van-row>
      <van-row style='padding: 1%;margin: 0px' v-show="showTyper==2" >
        <div class="bound-veh-keyBoard-num">
                <span class="bound-veh-keyBoard-numkey bound-veh-keyBoard-numkeywidth" v-for="i in keyNums"  @click='input(i)' :class="{ 'delete-button': i=='×' ,'bound-veh-keyboardactive': i==active }"
                >{{i}}</span>
          <!-- :style='{"margin-left":{A:"5%",Z:"10%"}[i]}' -->
        </div>
      </van-row>
      <span  style='margin: 0px' @click='hideKeyBoard()' class="bound-veh-keyboardbutton">
            完成
        </span>
    </van-popup>
  </div>
</template>

<script>
  import { ImagePreview } from 'vant';
  import {baseUrl} from 'config/index'
  import { getZQOpenId,findCommonCars, findParkingRecord, findParkInfo } from '../../api/nearPark/nearPark';
  import { Toast } from 'vant';
    export default {
      name: 'fastPay',
      data() {
        return {
          payInfo:[],
          bindCarNo:[],
          optionTips: '牌照类型', //操作说明
          carType:'', //车牌类型
          showCarType:false,
          columns: ['白色牌照', '黄色牌照', '蓝色牌照', '黑色牌照', '绿色牌照','其他类型'],
          ZQOpenId:'',
          searchCarNo: '',
          historyNo:'',
          show: false,
          showTyper: 0,    //输入法的值，0表示不显示，1表示显示省输入键盘，2表示显示数字字母输入键盘
          itemCount:1,
          loading: false,
          finished: false,
          provinces:["京","沪","浙","苏","粤","鲁","晋","冀",    //省
            "豫","川","渝","辽","吉","黑","皖","鄂",
            "津","贵","云","桂","琼","青","新","藏",
            "蒙","宁","甘","陕","闽","赣","湘","关闭"],
          keyNums:["0","1","2","3","4","5","6","7","8","9",     //数字字母
            "A","B","C","D","E","F","G","H","J","K","L","M","N",
            "P","Q","R","S","T","U","V","W","X","Y","Z","挂","学","警","港","澳","×"],
          carNumber:'',
          active:'',
        };
      },
      mounted() {
        //----获取code 取openid
        var _code=this.$route.query.code
        if(_code!=null){
          // 获取openid
          getZQOpenId(_code).then((res) =>{
            //----数据写入缓存
            window.localStorage.setItem('ftPZQopenid',res)
            this.ZQOpenId = res
            //---获取绑定的车辆记录
            // findCommonCars(this.ZQOpenId).then((res)=>{
            //   this.bindCarNo=res
            // },(err)=>{
            //   alert(err)
            // })
            //获取当前用户的在停信息
            findParkingRecord(this.ZQOpenId).then((res)=>{
              this.payInfo=res
            },(err)=>{
              // Toast.fail('查询车辆信息失败')
            })
          },(err)=>{
            // alert('网络错误')
          })
        }else{
          //h缓存读取
          var _opedid=window.localStorage.getItem('ftPZQopenid')
          //--取数据
          //获取当前用户的在停信息
          findParkingRecord(_opedid).then((res)=>{
            this.payInfo=res
          },(err)=>{
            // Toast.fail('查询车辆信息失败')
          })
        }
      },
      methods: {
        // 车牌选择后
        onConfirm(value,index){
          console.log(index)
          console.log(this.columns[index])
          this.optionTips=this.columns[index]
          this.showCarType=false
          switch (this.columns[index])
          {
            case '白色牌照':
              this.carType=0;
              break;
            case '黄色牌照':
              this.carType=1;
              break;
            case '蓝色牌照':
              this.carType=2;
              break;
            case '黑色牌照':
              this.carType=3;
              break;
            case '绿色牌照':
              this.carType=4;
              break;
            case '其他牌照':
              this.carType=9;
              break;
          }
        },
        showKeyBoard() {
          this.show = true;
          this.showTyper = 1;
          this.changeTyper();
        },
        hideKeyBoard() {
          //---验证车牌输入是否正确
          this.save()
        },
        input:function (item) {
          if(item=='OK'||item=='关闭'){    //判断是否点击了关闭按钮
            this.show=false;
            this.showTyper = 1;
            return;
          }
          if (item=='×'){
            this.carNumber = this.carNumber.slice(0,-1);
            this.changeTyper();
            this.active=this.carNumber.charAt(this.carNumber.length-1)
            return;
          }
          if(this.carNumber.length<8){    //判断当前的车牌号的数目是否合法，还未超出7位则可继续输入
            this.carNumber=this.carNumber+item;
            this.changeTyper();
            this.active=item;
          }else {
            Toast.fail('车牌长度够啦');
          }
        },
        changeTyper:function () {
          if(this.carNumber.length>=1){
            this.showTyper = 2;
          }
          if(this.carNumber.length==0){
            this.showTyper = 1;
          }
        },
        save: function () {
          var carNumberReg = /([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})/;
          if (!(carNumberReg.test(this.carNumber))) {
            Toast.fail('车牌号码错误');
            return;
          }else{
            this.show = false;
            this.showTyper = 0;
          }
        },
        //----查询车辆信息
        searchCarInfo(){
          // 关闭键盘
          this.show=false;
          this.showTyper = 1;
          if(this.carType==''){
            Toast.fail('请选择牌照类型')
            return;
          }
          // 先判断输入车牌是否正确
          var carNumberReg = /([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})/;
          if(carNumberReg.test(this.carNumber)){
            //----查询在停信息
            //--查询所需要的数据
            var PlateInfo={
              plateColor:this.carType,
              plateNo:this.carNumber
            }
            findParkInfo(PlateInfo).then((res)=>{
              console.log(res)
              if(res.code=='00'){ //没有在停信息
                Toast('没有查询到信息呦')
                return
              }else{ //有在停信息
                  //--页面跳转
                // 页面跳转
                var  _codeUrl='http://wx.jinanparking.com/getCode.html?appid=wx7305253d6ea42110&scope=snsapi_base&state=wxPay&redirect_uri='
                var _redirectUrl=baseUrl+'/PayDetail'
                var arr={
                  CarNo:this.carNumber,
                  CarColor:this.carType,
                  zqopenid:this.ZQOpenId
                }
                var _params='?Info='+JSON.stringify(arr)
                var _url=_codeUrl+ _redirectUrl+_params
                window.location.href=_url
              }
            },(err)=>{
                Toast.fail('请重试')
            })
          }else{
          //   // 提示
            Toast.fail('车牌号错误');
          }
        },
        // ---详情
        toPayDeatils(index){
          // 页面跳转
          var  _codeUrl='http://wx.jinanparking.com/getCode.html?appid=wx7305253d6ea42110&scope=snsapi_base&state=wxPay&redirect_uri='
          var _redirectUrl=baseUrl+'/PayDetail'
          var arr={
            CarNo:this.payInfo[index].plateNo,
            CarColor:this.payInfo[index].plateColor,
            zqopenid:this.ZQOpenId
          }
          var _params='?Info='+JSON.stringify(arr)
          var _url=_codeUrl+encodeURIComponent(_redirectUrl+_params)
          window.location.href=_url
        }
      }
    }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 99.9vh;
    /*background:#F3F3F3;*/
    background: #F0F0F0;
    padding-top: 20px;
  }
 .bindCar{
    width: 92%;
    margin: auto;
    background: white;
   border: 1px solid #379EFD;
   border-radius: 10px;
  }
  .searchCar{
    width: 92%;
    margin: auto;
    margin-top: 30px;
    height: 235px;
    background: white;
    border: 1px solid #379EFD;
    border-radius: 10px;
  }
  .tis{
    margin: 30px 0px;
  }
  .hascar{
    margin-top: 30px;
    width: 96%;
    margin-left:2%;
    margin-right:2%;
  }
  .carlist{
    font-size: 15px;
  }
  .searchBar{
    width: 86%;
    margin: 0px 7%;
    padding-top: 10px;
  }
  .history{
    width: 86%;
    margin: 20px 7%;
    font-size: 13px;
  }
  span{
    color:#379EFD;
    display:inline-block;
    margin:0 8px ;
  }
  .btn{
    margin: 30px 6%;
    width: 88%;
  }
  .btn-c{
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    border-radius: 4px;
  }
  .bound-veh-background {
    background: #f7f6f6;
    height: 100%;
  }

  .bound-veh-tite-text1 {
    font-size: 23px;
    color:#FFFFFF;
    margin-bottom: 13px;
  }
  .bound-veh-tite-text2 {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 21px;
  }
  .bound-veh-field {
    border: 1px solid #30AFF7;
    border-radius: 8px;
  }

  .bound-veh-field-slottext {
    color: #3DA6FF;
    font-size: 20px;
  }

  .bound-veh-field-picker{
    display: inline-block;
    width: 16%;
    height: 100%;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
  .bound-veh-field-input{
    display: inline-block;
    width: 83%;
    height: 100%;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }

  @media screen and (max-width: 487px) {
    .bound-veh-field-picker{
      width: 16%;
    }
    .bound-veh-field-input{
      width: 80%;
    }
  }
  @media screen and (max-width: 305px) {
    .bound-veh-field-picker{
      width: 18%;
    }
    .bound-veh-field-input{
      width: 77%;
    }
  }
  @media screen and (max-width: 275px) {
    .bound-veh-field-picker{
      width: 21%;
    }
    .bound-veh-field-input{
      width: 73%;
    }
  }

  .bound-veh-list {
    color: #3DA6FF;
    text-align: center;
    margin: 20px;
  }

  .bound-veh-keyboardcell {
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid #dfdfdf;
    height: 35px;
    width: 1%;
    color: #30AFF7;
  }

  .bound-veh-keyboardbutton {
    background: #30AFF7;
    color: #FFFFFF;
    font-size: 20px;
    height: 22px;
    text-align: center;
    padding: 5px;
    width: 100%;
    display: inline-block;
  }

  .bound-veh-cellCenter{
    text-align: center;
    display: inline-block;
  }

  .bound-veh-keyBoard-num{
    text-align: center;
    display: table;
    width: 100%;
  }

  .bound-veh-keyBoard-numkey{
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #dfdfdf;
    line-height: 35px;
    color: #30AFF7;
    float: left;
  }

  .bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.4%
  }

  @media screen and (max-width: 1035px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.36%
    }
  }

  @media screen and (max-width: 725px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.33%
    }
  }
  @media screen and (max-width: 603px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.3%
    }
  }

  @media screen and (max-width: 506px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.27%
    }
  }

  @media screen and (max-width: 443px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 8.9%;
      margin: 0.25%
    }
  }

  @media screen and (max-width: 340px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 8.8%;
      margin: 0.22%
    }
  }

  @media screen and (max-width: 267px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 8.6%;
      margin: 0.2%
    }
  }

  @media screen and (max-width: 203px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 8.3%;
      margin: 0.15%
    }
  }

  @media screen and (max-width: 144px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 8%;
      margin: 0.1%
    }
  }

  @media screen and (max-width: 125px) {

    .bound-veh-keyBoard-numkeywidth{
      width: 8%;
      margin: 0.05%
    }
  }

  .delete-button{
    font-size: 40px;
    font-weight: bold;
    background: #30AFF7;
    color: red;

  }
  .bound-veh-keyboardactive{
    background-color: #30AFF7;
    color: #ffffff;
  }
</style>
